<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: CrazyTobis
  Date: 2020-05-05
  Time: 19:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="mt-2" name="supplier-add" >
    <!-- 新增和删除按钮 -->
    <div class="row mb-3">
        <div class="col-1">
            <button name="addSupplier" class="btn btn-outline-primary btn-block">新增</button>
        </div>

    </div>

    <!-- 查询输入组 -->
    <div class="mb-3">

        <form name="addForm">
            <div class="form-row">
                <div class="col-2">
                    <input name="supplierName" class="form-control" placeholder="请输入供应商名称">
                </div>
                <div class="col-2">
                    <div class="form-group">
                        <select class="form-control" name="typeId">
                            <option class="text-danger" hidden value="0">请选择供应商类型</option>
                            <c:forEach var="list" items="${requestScope.typeList}">
                                <option value="${list.id}">${list.supplierType}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="col-2">
                    <input name="supplierId" class="form-control" placeholder="请输入供应商ID">
                </div>
                <div class="col-3">
                    <button name="thl-submit" class="btn btn-primary" type="button">查询</button>
                    <button class="btn btn-light" type="reset" ><i class="fa fa-repeat p-1"></i>重置</button>
                </div>
            </div>
        </form>
    </div>

    <%-- 表格 --%>
    <div name="thl-addSupplierTable">

    </div>
    <%-- 分页条 --%>
    <div class="clearfix">
        <ul class="pagination float-right" name="ulPage"  >
        </ul>
    </div>

</div>

<script>
    (function () {
        //点击新增供应商按钮后加载页面
        $('[name="addSupplier"]').click(function () {
           // $('[name="supplier-add"]').load('addNewSupplier.html');

            $('').addMianbao('addNewSupplier.html','新增供应商');
            // $.get('addNewSupplier.html',{},function (html) {
            //     $('[name="supplier-add"]').html(html)
            // })
        });

        $('[name="thl-submit"]').click(function () {

            let data = $('[name="addForm"]').serialize();

            $.post('supplierList.html',data,function (result) {
                //将返回的json数据中的pageVO取出来
                let pageVO = result.data;

                //定义分页的数据
                let currentIndex = pageVO.pageIndex;
                let pageSize = pageVO.pageSize; //展示多少数据
                let total = pageVO.total; //一共有多少条数据
                let totalPage = Math.ceil(total / pageSize); //总页数
                //判断是否是第一页或者是最后一页
                let preDisabled = currentIndex <= 1 ? 'disabled' : '';
                let nextDisabled = currentIndex >= totalPage ? 'disabled' : '';

                //定义模板字符串，并将数据拼接到模板字符串中
                let pageNode =  `
                <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="1">Previous</a></li>
                <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex - 1}">&laquo;</a></li>
                <li class="page-item disabled"><a class="page-link" href="#" name="currentIndex">\${currentIndex}</a></li>
                <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex + 1}">&raquo;</a></li>
                <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${totalPage}">Next</a></li>
                <li class="page-item" style="min-width: 84px; height: 35px"><div class="page-link" style="padding-top: 7px; padding-bottom: 7px"><input name="jumpPage" value="\${currentIndex}" style="width: 50px;height: 20px;"> <span>/\${totalPage}</span></div></li>
                <li class="page-item"><button class="page-link" type="button">go</button></li>`;
                //将模板字符串放到定义好的ul中
                $('[name="ulPage"]').html(pageNode)

                //定义要显示的列名
                let columns = [{field:"id",title:"供应商编号"},
                    {field:"supplierName",title:"供应商名称"},
                    {field:"supplierType", title:"供应商类型"},
                    {field:"address", title:"地址"},
                    {field:"contactName", title:"联系人姓名"},
                    {field:"phone", title:"联系人电话"}];

                //定义表格的数据
                let options = {
                    isPaging: false,
                    node: "[name='thl-addSupplierTable']",
                    pageVO: pageVO,
                    columns: columns,
                    isEdit: true,
                    fontAwesome:{ 'fa fa-pencil':'修改' , 'fa  fa-bars':'详情' },
                    fontAwesomeClick:{
                        "修改":function (event,obj,node,parent) {
                            //将点击的tr节点的数据发送ajax请求到对应的servlet处理
                            //let id = parent.dataset.key; //绑定在tr节点上的data-key值
                            let url = 'updateSupplier'; //要请求的地址
                            let value = obj; //点击的tr对象

                            //发送ajax请求
                            $('').addMianbao(url,"修改供应商",value)
                            //$('[name="supplier-add"]').load(url,)
                            //  $.get(url,value,function (html) {
                            //      $('[name="supplier-add"]').html(html);
                            //  })

                        },
                        "详情":function (event,obj,node,parent) {
                            let url = 'supplierDetail'; //要请求的地址
                            let value = obj; //点击的tr对象
                            //发送ajax请求
                            $('').addMianbao(url,"供应商详情",value)
                        }
                    }
                };
                firstTable(options)
            },'json')

        })

        //给分页的ul绑定点击事件
        $('[name="ulPage"]').on('click',function (e) {
            e.preventDefault();
            //如果点击的是a标签
            if(e.target.nodeName === 'A'){
                //定义要请求的地址
                let url = 'supplierList.html';
                //获取请求的form表单值
                let formValue = $('[name="addForm"]').serialize();
                //获取请求的分页参数值
                let currentIndex = e.target.dataset.currentIndex;

                //最终的value
                let value = formValue + '&' + 'currentIndex=' + currentIndex;

                $.post(url, value,function (result) {
                    //将返回的json数据中的pageVO取出来
                    let pageVO = result.data;

                    //定义分页的数据
                    let currentIndex = pageVO.pageIndex;
                    let pageSize = pageVO.pageSize;
                    let total = pageVO.total;
                    let totalPage = Math.ceil(total / pageSize);

                    //判断是否是第一页或者是最后一页
                    let preDisabled = currentIndex <= 1 ? 'disabled' : '';
                    let nextDisabled = currentIndex >= totalPage ? 'disabled' : '';

                    //定义模板字符串，并将数据拼接到模板字符串中
                    let pageNode =  `
                <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="1">Previous</a></li>
                <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex - 1}">&laquo;</a></li>
                <li class="page-item disabled"><a class="page-link" href="#" name="currentIndex">\${currentIndex}</a></li>
                <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex + 1}">&raquo;</a></li>
                <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${totalPage}">Next</a></li>
                <li class="page-item" style="min-width: 84px; height: 35px"><div class="page-link" style="padding-top: 7px; padding-bottom: 7px"><input name="jumpPage" value="\${currentIndex}" style="width: 50px;height: 20px;"> <span>/\${totalPage}</span></div></li>
                <li class="page-item"><button class="page-link" type="button">go</button></li>`;
                    //将模板字符串放到定义好的ul中
                    $('[name="ulPage"]').html(pageNode)

                    //定义要显示的列名
                    let columns = [{field:"id",title:"供应商编号"},
                        {field:"supplierName",title:"供应商名称"},
                        {field:"supplierType", title:"供应商类型"},
                        {field:"address", title:"地址"},
                        {field:"contactName", title:"联系人姓名"},
                        {field:"phone", title:"联系人电话"}];

                    //定义表格的数据
                    let options = {
                        isPaging: false,
                        node: "[name='thl-addSupplierTable']",
                        pageVO: pageVO,
                        columns: columns,
                        isEdit: true,
                        fontAwesome:{ 'fa fa-pencil':'修改' , 'fa  fa-bars':'详情' },
                        fontAwesomeClick:{
                            "修改":function (event,obj,node,parent) {
                                //将点击的tr节点的数据发送ajax请求到对应的servlet处理
                                //let id = parent.dataset.key; //绑定在tr节点上的data-key值
                                let url = 'updateSupplier'; //要请求的地址
                                let value = obj; //点击的tr对象
                                //发送ajax请求
                                $('').addMianbao(url,"修改供应商",value)
                                //
                            },
                            "详情":function (event,obj,node,parent) {
                                let url = 'supplierDetail'; //要请求的地址
                                let value = obj; //点击的tr对象
                                //发送ajax请求
                                $('').addMianbao(url,"供应商详情",value)
                            }
                        }
                    }
                    firstTable(options)
                },'json')
            };
            //如果点击的是button标签
            if(e.target.nodeName === 'BUTTON'){
                //定义要请求的地址
                let url = 'supplierList.html';
                //获取请求的form表单值
                let formValue = $('[name="addForm"]').serialize();
                //获取请求的分页参数值
                let currentIndex = $('[name="jumpPage"]').val();
                //判断输入的页码是否符合规定，若不符合，则赋默认值
                //定义变量保存验证正整数的正则表达式规则
                let reg = /^[1-9]+$/;
                if(!reg.test(currentIndex)){
                    currentIndex = $('[name="currentIndex"]').text()
                }
                //最终的value
                let value = formValue + '&' + 'currentIndex=' + currentIndex;
                //给button添加ajax请求
                $.post(url, value,function (result) {

                    //将返回的json数据中的pageVO取出来
                    let pageVO = result.data;
                    //定义分页的数据
                    let currentIndex = pageVO.pageIndex;

                    let pageSize = pageVO.pageSize;
                    let total = pageVO.total;
                    let totalPage = Math.ceil(total / pageSize);

                    //判断是否是第一页或者是最后一页
                    let preDisabled = currentIndex <= 1 ? 'disabled' : '';
                    let nextDisabled = currentIndex >= totalPage ? 'disabled' : '';

                    //定义模板字符串，并将数据拼接到模板字符串中
                    let pageNode =  `
                <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="1">Previous</a></li>
                <li class="page-item \${preDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex - 1}">&laquo;</a></li>
                <li class="page-item disabled"><a class="page-link" href="#" name="currentIndex">\${currentIndex}</a></li>
                <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${currentIndex + 1}">&raquo;</a></li>
                <li class="page-item \${nextDisabled}"><a class="page-link" href="#" data-current-index="\${totalPage}">Next</a></li>
                <li class="page-item" style="min-width: 84px; height: 35px"><div class="page-link" style="padding-top: 7px; padding-bottom: 7px"><input name="jumpPage" value="\${currentIndex}" style="width: 50px;height: 20px;"> <span>/\${totalPage}</span></div></li>
                <li class="page-item"><button class="page-link" type="button">go</button></li>`;
                    //将模板字符串放到定义好的ul中
                    $('[name="ulPage"]').html(pageNode)

                    //定义要显示的列名
                    let columns = [{field:"id",title:"供应商编号"},
                        {field:"supplierName",title:"供应商名称"},
                        {field:"supplierType", title:"供应商类型"},
                        {field:"address", title:"地址"},
                        {field:"contactName", title:"联系人姓名"},
                        {field:"phone", title:"联系人电话"}];

                    //定义表格的数据
                    let options = {
                        isPaging: false,
                        node: "[name='thl-addSupplierTable']",
                        pageVO: pageVO,
                        columns: columns,
                        isEdit: true,
                        fontAwesome:{ 'fa fa-pencil':'修改' , 'fa  fa-bars':'详情' },
                        fontAwesomeClick:{
                            "修改":function (event,obj,node,parent) {
                                //将点击的tr节点的数据发送ajax请求到对应的servlet处理
                                //let id = parent.dataset.key; //绑定在tr节点上的data-key值
                                let url = 'updateSupplier'; //要请求的地址
                                let value = obj; //点击的tr对象
                                //发送ajax请求
                                $('').addMianbao(url,"修改供应商",value)

                            },
                            "详情":function (event,obj,node,parent) {
                                let url = 'supplierDetail'; //要请求的地址
                                let value = obj; //点击的tr对象
                                //发送ajax请求
                                $('').addMianbao(url,"供应商详情",value)
                            }
                        }
                    }
                    firstTable(options)
                },'json')
            }

        })

    })();

</script>